<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
	<style>
		.da{
			font-size: 35px;
		}
	</style>
</head>

<body>
	<div class="da">待办事项清单</div>
	<br/>
	<div><input type="text" id="title" size="20px" placeholder="添加新事项"><input  onClick="add()" type="button" id="valuetitle" value="+" ></div>
	<br/>
	<div><input type="text" id="delete" size="20px" placeholder="要删除的选项"><input onClick="delet()" type="button" value="删除"></div>
	<br/>
    <div><input type="text" id="lists" size="20px" placeholder="展示方式"><input onClick="liste()" type="button" value="确定"></div>
	<div>
	<ul id="show"></ul>
	</div>

</body>
<script>

	// fetch("http://127.0.0.1:5000/todos")
	//   .then(function(response) {
	// 	return response.json();
	//   })
	//   .then(function(myJson) {
	// 	document.getElementById("show").innerHTML="";
	// 	var data=myJson.todos;
	// 	for (var i=0;i<data.length;i++){
	// 		if (!data[i].completed){
	// 			var pot='<li class="list"><input type="checkbox" value="'+data[i].id+'" onchange="finall(this.value)">'+data[i].id+'.'+data[i].title+'</li>';
	// 			document.getElementById("show").innerHTML+=pot;
	// 		}
	// 	}
	//
	//   });
	function liste(){
		var can=document.getElementById("lists").value;
		fetch("http://127.0.0.1:5000/todos")
		  .then(function(response) {
			return response.json();
		  })
		  .then(function(myJson) {
			document.getElementById("show").innerHTML="";
			var data=myJson.todos;
			for (var i=0;i<data.length;i++){
				if (data[i].completed=='False'&&can=='1'){
					var pot='<li class="list"><input type="checkbox" value="'+data[i].id+'" onchange="finall(this.value)">'+data[i].id+'.'+data[i].title+'</li>';
				document.getElementById("show").innerHTML+=pot;
				}
				else if(can=="all") {
                   var pot='<li class="list"><input type="checkbox" value="'+data[i].id+'" onchange="finall(this.value)">'+data[i].id+'.'+data[i].title+'</li>';
				document.getElementById("show").innerHTML+=pot;
                }
				else if(!data[i].completed&&can==''){
					var pot='<li class="list"><input type="checkbox" value="'+data[i].id+'" onchange="finall(this.value)">'+data[i].id+'.'+data[i].title+'</li>';
				document.getElementById("show").innerHTML+=pot;
				}
			}

		  });
	}
	function add(){
		var val=document.getElementById("title").value;
		var url="http://127.0.0.1:5000/todos";
		fetch(url, {
		  method: 'POST',
		  body: 'title='+val,
		  headers: new Headers({
			'Content-Type': 'application/json'
		  })
		})
		.then(res => res.json())
	}
	function finall(id){
		fetch("http://127.0.0.1:5000/todos/mark_completed"+"?id="+id)
		.then(res => res.json())
	}
	function delet(){
		var id=document.getElementById("delete").value;
		fetch("http://127.0.0.1:5000/todos/delete"+"?id="+id)
		.then(res=>res.json())
	}

</script>
</html>
